<template>
  <v-ons-page>
    <v-ons-toolbar>
      <div class="left">
        <v-ons-back-button>返回</v-ons-back-button>
      </div>
      <div class="center">标签设置</div>
    </v-ons-toolbar>
    <div class="container">

      <div class='sub-title-panel' v-for="tagArrItem in tagArr">
        <div class='title'>
          {{tagArrItem.title}}
        </div>
        <div class='content'>
          <div class='tag-group'>
            <div @click="chooseTag({item:tagItem})" v-for="tagItem in tagArrItem.tagGroup" class='tag-item'
                 :class="tagItem.select ? 'active' : ''">
              {{tagItem.name}}
            </div>
          </div>
        </div>
      </div>

      <button>确认</button>

    </div>

  </v-ons-page>
</template>

<script>
  export default {
    data() {
      return {
        tagArr: [
          {
            "title": "标签",
            "tagGroup": [
              {
                "id": 6,
                "name": "烟",
                "select": true
              },
              {
                "id": 7,
                "name": "酒",
                "select": true
              },
              {
                "id": 9,
                "name": "文件",
                "select": true
              },
              {
                "id": 29,
                "name": "呆萌",
                "select": true
              },
              {
                "id": 32,
                "name": "水果",
                "select": false
              },
              {
                "id": 33,
                "name": "花",
                "select": true
              },
              {
                "id": 34,
                "name": "吃货",
                "select": false
              },
              {
                "id": 36,
                "name": "幽默",
                "select": false
              },
              {
                "id": 37,
                "name": "乐观",
                "select": false
              },
              {
                "id": 38,
                "name": "低调",
                "select": false
              },
              {
                "id": 39,
                "name": "善良",
                "select": false
              },
              {
                "id": 40,
                "name": "阳光",
                "select": false
              },
              {
                "id": 41,
                "name": "直率",
                "select": false
              },
              {
                "id": 43,
                "name": "自信",
                "select": false
              },
              {
                "id": 44,
                "name": "完美主义",
                "select": false
              },
              {
                "id": 51,
                "name": "粗枝大叶",
                "select": false
              },
              {
                "id": 52,
                "name": "粗枝大叶",
                "select": false
              },
              {
                "id": 59,
                "name": "哈哈",
                "select": false
              }
            ]
          }
        ],
        myTagArr: [
          "6",
          "7",
          "9",
          "29",
          "33"
        ]
      }
    },
    methods: {
      enterPage({path: path, actionSheet: actionSheet}) {
        if (actionSheet) {
          this.actionSheetVisible = false
        }
        this.$router.push({
          path: path
        });
      },
      chooseTag({item: item}) {
        if(item.select){
          item.select = false;
        }else{
          item.select = true;
        }
      }
    }
  }
</script>

<style scoped lang="less">
  @import "../../assets/less/consumer/label-setting.less";
</style>
